<template>
  <div class="u_center">
    <div :style="{'height':winHei+'px'}" class="u_cLeftBg">
      <div class="u_cLeft">
        <div @click="tz('/')" class="logo">
          <img src="@/assets/img/ins_logo.svg" alt="">
        </div>

        <div class="u_c_LeNavBg">
          <ul class="u_c_LeNav">
          	<li @click="tz(btnTagIt.path)" :class="{'acBtnLi':R_path==btnTagIt.path}" v-for="(btnTagIt,btnTagIdx) in btnTagArr" :key="'btnTagIt_0'+btnTagIdx">
              <span>{{btnTagIt.name}}</span>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <div :style="{'width':(winWid-220)+'px'}" class="u_cTopBg">
      <div class="u_cTop">
          <div class="t">
            <div class="tu">
              <img :src="myInfo.avatar" >
            </div>
            <span>
              {{myInfo.nickname}}
            </span>
          </div>
          <div class="b_Bg">
            <div class="b">
              <div class="bt">
                <div class="tL">
                  <div class="tu">
                    <img :src="myInfo.avatar" >
                  </div>
                  <dl class="txtBox">
                    <dt>
                      <div class="txt">
                        {{dotNickFn(myInfo.nickname)}}
                      </div>
                      <!-- <div class="tag">
                        <img src="@/assets/img/u_center/vip.png" >
                        <span>
                          未开通会员
                        </span>
                      </div> -->
                    </dt>
                    <dd>ID：{{myInfo.id}}</dd>
                  </dl>
                </div>
                <div  @click="loginOut" class="tR">
                  退出登录
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>


    <div :style="{'width':(winWid-220)+'px','height':(winHei-64)+'px'}" class="u_cRightBg">
        <div class="u_cRight">
          <ul>
          	<li>
              <keep-alive>
                <router-view></router-view>
              </keep-alive>
            </li>
          </ul>
        </div>
    </div>

    <div class="mbNavBg">
      <div class="mbNav">
        <div @click="tz('/')" class="logo">
          <img src="@/assets/img/ins_logo.svg" alt="">
        </div>
        <div @click="mbNavBtnFn" class="mb_btn">
          <img v-show="!is_ShowMbNav" src="../assets/img/mb/closeMenu.png" >
          <img v-show="is_ShowMbNav" src="../assets/img/mb/openMenu.png" >
        </div>
      </div>

      <div v-show="is_ShowMbNav" class="mbNavBotBg">
      	<ul>
              <li @click="mb_tzFn(mb_btnIt.path)" :class="{'mbNavAc':R_path==mb_btnIt.path}" v-for="(mb_btnIt,mb_btnIdx) in btnTagArr" :key="'mb_btnIt_0'+mb_btnIdx"><span>{{mb_btnIt.name}}</span></li>
      	</ul>

      	<dl class="mb_uInfo">
      		 <dt>
             <div class="tu">
                 <img :src="myInfo.avatar" >
               </div>
               <span>
                 {{dotNickFn(myInfo.nickname)}}
               </span>

           </dt>
      		 <dd>
             <span @click="loginOut">
               退出登录
             </span>
           </dd>
      	</dl>
      </div>

    </div>

    <div v-show="is_vipPay" class="vipPayBg">

      <div class="vipPay">
        <img @click="op_vip_popFn(false)" src="@/assets/img/account/close.png" alt="" class="closeBtn">
        <h3 class="title">
          支付方案
        </h3>

       <div v-show="is_topMain" class="topMain">

         <div class="myVipBoxBg">
           <div class="myVipBox c_NumAc">
              <h3>
                {{vipInfoObj.name}}
              </h3>
              <h1>
                <span>{{vipInfoObj.money}}</span><strong>元</strong>
              </h1>
           </div>
         </div>

         <div class="chargeYouhui">
           <h2 class="c_title">
             优惠码
           </h2>
           <div class="chargeYouhuiMainBg">
             <dl>
               <dt>
                 <input @input="yhmCodeInpFn" placeholder="请输入优惠码" type="text" v-model="yhmCode">
               </dt>
               <dd @click="cxChargeCodeFn">
                 查询
               </dd>
             </dl>

           </div>

           <div v-show="yhmCode.length!==0" class="yhmTxt">
             <span v-if="yhmCodeText.code==200">
               此优惠码有效，已减免{{yhmCodeText.data.money}}元
             </span>
             <span v-else>
               {{yhmCodeText.msg}}
             </span>
           </div>
         </div>


         <ul class="chargeMethod">
         	<li v-show="payType.balance==1" @click="c_methFn(0)" :class="{'c_NumAc':cur_c_NumAc==0}">
             <div class="tu">
               <img src="@/assets/img/coinCharge/yuan.png" >
             </div>
             <div class="txt">
               <p>
                 余额支付
               </p>
               <span>
                 余额：￥{{myInfo.balance}}
               </span>
             </div>
           </li>
         	<li v-show="payType.wxpay==1" @click="c_methFn(1)" :class="{'c_NumAc':cur_c_NumAc==1}">
             <div class="tu">
               <img src="@/assets/img/coinCharge/wxpay.png" >
             </div>
             <div class="txt">
               <p>
                 微信支付
               </p>
             </div>
           </li>
         	<li v-show="payType.alipay==1" @click="c_methFn(2)" :class="{'c_NumAc':cur_c_NumAc==2}">
             <div class="tu">
               <img src="@/assets/img/coinCharge/alipay.png" >
             </div>
             <div class="txt">
               <p>
                 支付宝支付
               </p>
             </div>
          </li>

         </ul>

       </div>

       <div v-show="!is_topMain" class="botMain">
         <div class="payCodeBg" ref="qrCodeDiv"></div>
       </div>

        <div v-show="is_topMain" @click="goPayVip" class="goPayBtn">
          去支付
        </div>
      </div>

    </div>


  </div>
</template>

<script>
  import QRCode from 'qrcodejs2';

  export default{
    name: 'U_center',
    data(){
      return{
        myInfo:{
          avatar: "http://user.miyun.info/static/images/avatar.png",
          id: 13,
          mobile: "15245684561",
          nickname: "一顿胖三斤",
          score: 0,
          username: "一顿胖三斤",
          is_loginEd:false
        },

        btnTagArr:[
            {
              name:"账户管理",
              path:"/u_center/u_manage"
            },
            {
              name:"VIP套餐",
              path:"/u_center/vip_meal"
            },
            {
              name:"金币充值",
              path:"/u_center/coin_charge"
            },
            {
              name:"邀请奖励",
              path:"/u_center/invite_reward"
            },
            {
              name:"订单明细",
              path:"/u_center/cons_record"
            },
            {
              name:"余额明细",
              path:"/u_center/charge_record"
            },
            {
              name:"积分明细",
              path:"/u_center/mark_record"
            },
            {
              name:"余额充值记录",
              path:"/u_center/banlaceRecord"
            }
          ],
			  winWid:0,
			  winHei:0,
        R_path:"",
        is_ShowMbNav:false,

        //
        payType:{},
        //当前支付方式
        cur_pay_Type:"",
        cur_c_NumAc:null,
        is_vipPay:false,
        vipInfoObj:{},
        is_topMain:true,
        //付款二维码
        payQrCode:"",
          // 当前订单号
          order_sn:"",
          PayResTimer:null,
          yhmCode:"",
          yhmCodeText:"",
          //充值码
          chargeCode:"",

      }
    },
    watch:{
      $route:{
          //https://blog.csdn.net/qq_40323256/article/details/101907326
      		handler:function(newVal,oldVal){
             this.R_path=newVal.path;
      		},
      		deep:true,
          immediate:true
      },
      "$store.state.userInfo":{
        handler:function(newVal,oldVal){
          console.log("新用户信息：",newVal);
          this.myInfo=newVal;
        },
        deep:true,
        immediate:true
      }
    },
    // created() {
    //   let that=this;
    //   this.$bus.$on("refreshU_InfoEvent",()=>{
    //     console.log("refreshU_InfoEvent");
    //       that.getU_Info();
    //   });
    // },
    computed:{
      dotNickFn(val){
        return (val)=>{
          if(val.length>=12){
            return val.slice(0,12)+"***";
          }else{
            return val.slice(0,12);
          }

        }
      }
    },

    components:{
    },
    beforeMount() {
    	this.getWinWid();
    	this.getWinHei();
    },
    mounted() {
      let that=this;
      this.reSize();
      that.getU_Info();
      window.onresize=()=>{
          this.reSize();
      }

      that.getPayTypeFn();
    },
    methods:{
    

      // 查询充值码
      cxChargeCodeFn(){
        let that=this;

        this.$request.get(
          "/recharge/queryCode",
          {
            code:that.yhmCode
          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
          console.log("查询充值码res:",res);
          that.yhmCodeText=res.data;
          that.chargeCode=res.data.data.code;
          console.log("查询充值码请求成功：",that.chargeCode);

         })
         .catch((err)=>{
         	console.log("查询充值码请求失败：",err);
         });
      },

      yhmCodeInpFn(){
        let that=this;
        that.yhmCodeText={};

      },

      loginOut(){
        let that=this;
        this.$request.post(
          "/user/logout",
          {

          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        )
        .then(res=>{
          console.log("退出登录请求成功：",res);
          if(res.data.code==200){
            window.localStorage.removeItem("u_Token");
            window.localStorage.removeItem("u_Info");

            that.myInfo={
                          avatar: "http://user.miyun.info/static/images/avatar.png",
                          balance: "0.00",
                          coin: 0,
                          id: 13,
                          is_email: 0,
                          is_loginEd: true,
                          is_mobile: 0,
                          is_password: 0,
                          level: 0,
                          mobile: "15245684561",
                          nickname: "一顿胖三斤",
                          platform: 3,
                          score: 0,
                          total_amount: "0.00",
                          username: "一顿胖三斤",
                          is_loginEd:false
                        };
              this.$store.commit("updateU_Info",that.myInfo);

              this.$bus.$emit("toastEvent",res.data.msg,()=>{
                this.tz("/");
                this.$bus.$emit("tcAccountPopEvent",true);
              });

          }

        })
         .catch((err)=>{
         	console.log("退出登录请求失败：",err);
         });
      },
      delPayResTimer(){
        let that=this;
        clearInterval(that.PayResTimer);
        that.PayResTimer=null;
      },
      addPayResTimer(){
        let that=this;
        that.PayResTimer=setInterval(()=>{
          that.cxPayStatusFn();
        },2500);

      },
      // 查询扫码支付状态
      cxPayStatusFn(){
        let that=this;
        this.$request.get(
          "/order/queryPayResult",
          {
            order_sn:that.order_sn
          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
         	console.log("查询vip套餐扫码支付状态请求成功：",res);
          if(res.data.code==200){
            this.$bus.$emit("toastEvent",res.data.msg);
            that.delPayResTimer();
            that.opVipPopFb({},false);
          }

         })
         .catch((err)=>{
         	console.log("查询vip套餐扫码支付状态请求失败：",err);
         });
      },

      opVipPopFb(vipInfoObj,isShowVip){
        let that=this;
          console.log("vipInfoObj:",vipInfoObj);
          that.op_vip_popFn(isShowVip);
          that.vipInfoObj=vipInfoObj;
          that.is_topMain=true;
      },
      goPayVip(){
        console.log("去支付");
        let that=this;
        // if(that.chargeCode.length!==0){


        // }else{
        //     this.$bus.$emit("toastEvent","请输入正确的充值码!");
        // }


        this.$request.post(
          "/order/vip",
          {
            vip:that.vipInfoObj.id,
            code:that.chargeCode,
            pay_type:that.cur_pay_Type
          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{

         	console.log("vip套餐去支付请求成功：",res);
          if(that.cur_pay_Type!=="balance"){
            if(res.data.code==200){
              that.is_topMain=false;
              that.$refs.qrCodeDiv.innerHTML="";
              that.order_sn=res.data.data.order_sn;
              new QRCode(this.$refs.qrCodeDiv, {
                 	  text: res.data.data.qr_code,
                 	  width: 200,
                 	  height: 200,
                 	  colorDark: "#333333", //二维码颜色
                 	  colorLight: "#ffffff", //二维码背景色
                 	  correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
              });
              that.addPayResTimer();
            }

          }else{
            if(res.data.code==200){
              that.opVipPopFb({},false);
              this.$bus.$emit("toastEvent",res.data.msg);
              this.$bus.$emit("refreshU_InfoEvent");
            }
          }

         })
         .catch((err)=>{
         	console.log("vip套餐去支付请求失败：",err);
          //this.$bus.$emit("toastEvent",res.data.msg);
          this.$bus.$emit("toastEvent","请求失败，请重试!");
         });

      },
      op_vip_popFn(val){
        this.is_vipPay=val;
      },
      c_methFn(val){
          let that=this;
          that.cur_c_NumAc=val;
          if(that.cur_c_NumAc==0){
            that.cur_pay_Type="balance";
          }else if(that.cur_c_NumAc==1){
            that.cur_pay_Type="wxpay";
          }else if(that.cur_c_NumAc==2){
            that.cur_pay_Type="alipay";
          }

          console.log("that.cur_pay_Type:",that.cur_pay_Type);
        },
      // 支付方式
      getPayTypeFn(){
        let that=this;

        this.$request.get(
          "/order/getPayment",
          {

          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
          that.payType=res.data.data;
         	console.log("支付方式请求成功：",that.payType);

         })
         .catch((err)=>{
         	console.log("支付方式请求失败：",err);
         });
      },

      mbNavBtnFn(){
        let that=this;
        that.is_ShowMbNav=!that.is_ShowMbNav;
      },
      mb_tzFn(val){
        let that=this;
        that.tz(val);
        that.is_ShowMbNav=false;
      },
      getU_Info(){
        let that=this;
        if(window.localStorage.getItem("u_Token")){
          let uInfoStr=window.localStorage.getItem("u_Info");
          //console.log("uInfoStr类型：",typeof uInfoStr);
          that.myInfo=JSON.parse(uInfoStr);
          // that.myInfo=JSON.parse(uInfoStr);
          // console.log("uInfoStr:",uInfoStr);
          // console.log("that.myInfo:",that.myInfo);
        }else{


          this.$bus.$emit("toastEvent","需要登录!",()=>{
            that.tz("/");
            this.$bus.$emit("tcAccountPopEvent",true);
          });




        }

      },
      reSize(){
      		this.getWinWid();
      		this.getWinHei();
      },
      getWinWid(){
      	this.winWid=document.documentElement.clientWidth||document.body.clientWidth;
      },
      getWinHei(){
      	this.winHei=document.documentElement.clientHeight||document.body.clientHeight;
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  @import "../assets/css/u_center.less";

  .vipPayBg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .vipPay{
      background: #fff;
      position: relative;
      padding: 30px;
      border-radius: 10px;
      width: 500px;
      .closeBtn{
        position: absolute;
            top: 30px;
            right: 20px;
        cursor: pointer;
        width: 15px;
        opacity: .5;
      }

      .closeBtn:hover{
        opacity: .8;
      }
      .title{
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            color: #33383e;
      }

      .myVipBoxBg{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top:20px;

        .c_NumAc:after{
        	content: "";
        	position: absolute;
        	bottom: -1px;
        	right: -1px;
        	width:38px;
        	height: 36px;
        	background: url(../assets/img/coinCharge/selected.png) no-repeat center center;
        	background-size: 100% 100%;
        }
        .myVipBox{
          border: 1px solid #2254f4;
          padding: 30px 60px;
          border-radius: 5px;
          position: relative;
          h3{
            text-align: center;
                font-weight: 600;
                font-size: 30px;
                line-height: 42px;
                color: #33383e;
          }
          h1{
            color: rgb(34, 84, 244);
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: flex-end;
            margin-top: 18px;
            font-weight: normal;
            strong{
              display: block;
                  font-size: 16px;
                  line-height: 16px;
            }
            span{
              display: block;
              font-size: 52px;
              line-height: 33px;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }



  .chargeMethod{
  	display: flex;
  	flex-direction: row;
  	li{
  		    width: 220px;
  		    height: 86px;
  		border: 1px solid #d4d4d4;
  		border-radius: 8px;
  		overflow: hidden;
  		margin: 10px 7px;
  		cursor: pointer;
  		position: relative;
  		display: flex;
  		flex-direction: row;
  		justify-content: center;
  		align-items: center;
  		.tu{
  			width: 40px;
  			height: 40px;
  			display: flex;
  			flex-direction: row;
  			align-items: center;
  			justify-content: center;
  			margin-right: 6px;
  			img{
  				display: block;
  				max-width: 100%;
  				max-height: 100%;
  			}
  		}

  		.txt{
  			display: flex;
  			flex-direction: column;
  			justify-content: center;
  			p{
  				    font-size: 16px;
  				    line-height: 26px;
  				    color: #4e4e4e;
  			}
  			span{
  				display: block;
  				    font-size: 14px;
  				    color: #969696;
  					line-height: 20px;
  			}
  		}
  	}
  	li:hover{
  		border-color: #999;
  	}
  }


  .c_NumAc{
  	border-color: #2c8eff !important;
  }

  .c_NumAc:after{
  	content: "";
  	position: absolute;
  	bottom: -1px;
  	right: -1px;
  	width:38px;
  	height: 36px;
  	background: url(../assets/img/coinCharge/selected.png) no-repeat center center;
  	background-size: 100% 100%;
  }

.goPayBtn{
  					    width: 184px;
  						text-align: center;
  					    border-color: #2c8eff;
  					    border-radius: 23px;
  					    background-color: #2c8eff;
  					    font-size: 16px;
  					    color: #fff;
  						height: 45px;
  						line-height: 45px;
  						margin: 50px auto 0;
  						cursor: pointer;
  				}

  				.goPayBtn:hover{
  					background: #66b1ff;
  				}

          .payCodeBg{
            width: 200px;
            height: 200px;
            margin: 0 auto;
          }


  			.c_title{
  				font-size: 18px;
  				color: #282828;
  				line-height: 24px;
  				font-weight: normal;
          text-align: center;
  			}


.chargeYouhui{
  					padding: 40px 0;
            .chargeYouhuiMainBg{
              margin-top: 15px;
              dl{
                display: flex;
                flex-direction: row;
                justify-content: center;
                dt{
                  input{
                        border-radius: 4px;
                        border: 1px solid #DCDFE6;
                        color: #606266;
                        display: inline-block;
                        font-size: 15px;
                        height: 40px;
                        line-height: 40px;
                        outline: 0;
                        padding: 0 15px;
                        width: 200px;
                  }
                }
                dd{
                  background: #2c8eff;
                  color: #fff;
                  font-size: 15px;
                  height: 40px;
                  line-height: 40px;
                  padding:0 15px;
                  cursor: pointer;
                  border-radius: 4px;
                  margin-left: 10px;
                }
              }
            }

            .yhmTxt{
              display: flex;
              flex-direction: row;
              justify-content: center;
              span{
                display: block;
                color: #666;
                font-size: 14px;
                line-height: 22px;
                margin: 10px 0;
              }
            }
          }



@media screen and (max-width:767px) {
  .vipPayBg{
    .vipPay{
      width: 260px;
      .topMain{
        .myVipBoxBg{
          .myVipBox{
            padding: 30px;
          }
        }
        .chargeYouhui{
          padding: 8px 0;
          .chargeYouhuiMainBg{
            dl{
              dt{
                input{
                  width: 156px;
                }
              }
            }
          }
        }
        .chargeMethod{
          flex-direction: column !important;
          align-items: center;
          li{
            margin: 4px;
          }
        }
      }
      .botMain{
        .payCodeBg{
          margin: 15px auto 0;
         }
      }


      .goPayBtn{
        margin: 15px auto 0;
      }

    }
  }
}

</style>
